<template>
  <div class="latestsupply">
    <ul>
      <van-list
        v-model:loading="state.loading"
        :finished="state.finished"
        finished-text="没有更多了"
        @load="onLoad"
        style="width: 100%;
        padding: 0 5px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        "
      >
      <li v-for="item in latestsupplyList" :key="item.id">
        <p class="title"><span>采购</span>{{item.title}}</p>
        <p class="address">期望产地：{{item.production}}</p>
        <p class="level">
          品质要求:
          <span v-for="value in item.qualityTag" :key="value">
            {{value}}
          </span>
        </p>
        <p class="long">
          <em>{{item.distance?item.distance+"km":"无"}}</em>
          <van-icon name="map-marked" size="20px" style="margin-right:8px" />
          <span>{{item.production}}</span>
          <strong v-for="value in item.requirement" :key="value">{{value}}</strong>
        </p>
        <p class="weight">
          {{item.unitPrice+"斤"}}
        </p>
      </li>
      </van-list>
    </ul>
  </div>
</template>
<script>
import { onMounted,ref,reactive } from 'vue';
export default {
  setup(){
    const count=ref(4);
    const latestsupplyList=ref([]);
    const getlatestsupply=()=>{
      fetch("http://www.pudge.wang:5000/api/home/list",{
        method:"POST",
        body:JSON.stringify({status:"sellTag"}),
        headers:{'Content-Type' : 'application/json;charset=utf-8'}
      }).then(response=>response.json())
      .then(res=>{
        let arr=res.result;
        for(let item of arr){
          item.requirement=item.requirement.map((value)=>{
            if(value===1){
              value="企业认证"
            }else if(value===2){
              value="实名认证"
            }
            return value;
          });
          item.qualityTag=item.qualityTag.map((value)=>{
            if(value===1){
              value="纯天然"
            }else if(value===2){
              value="无添加"
            }else if(value===3){
              value="保质保量"
            }
            return value;
          })
        }
        let newArr=[];
        for(let i=0;i<count.value;i++){
          newArr.push(arr[i])
        }
        latestsupplyList.value=newArr;
      })
    };
     //下拉加载
    const state = reactive({
      loading: false,
      finished: false,
    });
    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        count.value+=5;
        getlatestsupply();

        // 加载状态结束
        state.loading = false;

        // 数据全部加载完成
        if (count.value >= 14) {
          state.finished = true;
        }
      }, 2000);
    };
    onMounted(()=>{
      getlatestsupply();
    })
    return {latestsupplyList,state,onLoad}
  }
}
</script>

<style scoped>
.latestsupply{
  width: 100%;
  box-sizing: border-box;
  background: #fbfbfb;
  padding-top: 97px;
}
.latestsupply p{
  margin: 0;
  font-size: 18px;
  margin-bottom: 5px;
  color: #5d5d5d;
}
.latestsupply ul{
  padding: 10px 10px 0 10px;
  box-sizing: border-box;
}
.latestsupply ul li{
  width: 100%;
  background: #fff;
  margin-bottom: 10px;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
}
.latestsupply .title{
  color: #333333;
  font-weight: 900;
}
.latestsupply .level{
  font-size: 14px;
}
.latestsupply .level span{
  margin-right: 5px;
  font-size: 16px;
}
.latestsupply .title span{
  width: 40px;
  height: 20px;
  color: #fff;
  background: #4cc79b;
  font-size: 15px;
  display: inline-block;
  text-align: center;
  line-height: 20px;
  font-weight: normal;
  border-radius: 5px;
  margin-right:5px
}
.latestsupply .address{
  font-size: 14px;
}
.latestsupply .long{
  font-size: 15px;
  margin-bottom: 20px;
}
.latestsupply .long em{
  margin-right: 10px;
}
.latestsupply .long strong{
  text-align: center;
  line-height: 16px;
  width: 65px;
  border-radius: 5px;
  height: 16px;
  border: 1px solid #4ddd89;
  color: #4ddd89;
  display: inline-block;
  margin: 0 5px;
}
.latestsupply .weight{
  color: #ff0000;
  font-weight: 900;
}
</style>